<!DOCTYPE html>
<html>
<head>
	<title>Flexible</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">

	<!-- jQuery, -->
	<script src="jquery/jquery-1.9.1.min.js"></script>

	<!-- Fotorama -->
	<link  href="../out/fotorama.css" rel="stylesheet">
	<script src="../out/fotorama.js"></script>

  <script type="text/javascript">
    $(function () {
      function catchImage (fotorama, $frame) {
        var $img = $('.fotorama__img', $frame);

        // resize fotorama
        fotorama.resize($img.data('measures'), 300);
      }

      $('.fotorama')
          .on('fotorama:showend', function (e, fotorama) {
            var $frame = fotorama.activeFrame.$stageFrame;

            if (!$frame.data('state')) {
              $frame.on('f:load f:error', function () {
                fotorama.activeFrame.$stageFrame === $frame && catchImage(fotorama, $frame);
              });
            } else {
              catchImage(fotorama, $frame);
            }
          })
          .fotorama();
      });
  </script>
</head>

<body>

<p>Flexible. The fotorama fits the size of active image on every transition. View page source for details.<p>

<!-- © -->
<p>Photos <a href="http://alexeilebedev.com/">by Alexei Lebedev</a>.</p>

<!-- Just don’t want to repeat this prefix in every img[src] -->
<base href="i/nyc/">

<!-- Fotorama -->
<!-- Attributes `data-auto="false"` & `data-fit="none"` are important here -->
<div class="fotorama"
     data-auto="false"
     data-fit="none">
	<a href="guy-in-car.jpg" data-caption="Guy in car"></a>
	<a href="acapella.jpg" data-caption="Acapella"></a>
	<a href="crazyjohn.jpg" data-caption="Crazy John"></a>
	<a href="dudeintheground.jpg" data-caption="Dude in the ground"></a>
	<a href="dudes.jpg" data-caption="Dudes"></a>
	<a href="explanation.jpg" data-caption="Explanation"></a>
	<a href="eyes.jpg" data-caption="Eyes"></a>
	<a href="facing-wind.jpg" data-caption="Facing wind"></a>
	<a href="father-son-looking.jpg" data-caption="Father son looking"></a>
	<a href="flipoff.jpg" data-caption="Flip off"></a>
	<a href="freakout.jpg" data-caption="Freak out"></a>
	<a href="guy-in-park.jpg" data-caption="Guy in park"></a>
	<a href="homeless-sleeping.jpg" data-caption="Homeless sleeping"></a>
	<a href="italianguy.jpg" data-caption="Italian guy"></a>
	<a href="KIOSK.jpg" data-caption="Kiosk"></a>
	<a href="ladies-riding.jpg" data-caption="Ladies riding"></a>
	<a href="lift-dude.jpg" data-caption="Lift dude"></a>
	<a href="severedhead-lo.jpg" data-caption="Severed head"></a>
	<a href="smoking.jpg" data-caption="Smoking"></a>
	<a href="streetlook.jpg" data-caption="Streetlook"></a>
	<a href="two-umbrellas.jpg" data-caption="Two umbrellas"></a>
	<a href="woman-reading.jpg" data-caption="Woman reading"></a>
</div>
</body>
</html>